<template>
  <div class="contant">
    <img src="/static/imgs/index/bg.png" alt="" class="indexPic">
    <img src="/static/imgs/hero/tanBg.png" alt="" class="tanBg">
    <div class="mine">
      <div class="top">
        <img src="/static/imgs/mine/eth.png" alt="" class="etc">
        <div class="topR">
          <div class="topRM">2950000</div>
          <img src="/static/imgs/index/add.png" alt="" class="addPic">
        </div>
      </div>
      <div class="copy">
        <div class="copyT" id="copyT1">lkdsfjdkjbkldbhadklb</div>
        <div class="copyB" @click="copy(1)">复制</div>
      </div>
      <div class="top top1">
        <img src="/static/imgs/mine/cac.png" alt="" class="etc">
        <div class="topR topR1">
          <div class="topRM">2950000</div>
          <img src="/static/imgs/index/add.png" alt="" class="addPic">
        </div>
      </div>
      <div class="copy">
        <div class="copyT" id="copyT2">lkdsfjdkjbkldbh12132</div>
        <div class="copyB" @click="copy(2)">复制</div>
      </div>
      <div class="detailed">
        <div class="list" id="list">
            <div class="hero">
              <div class="heroF">
                <img src="/static/imgs/hero/head.png" alt="">
              </div>
              <div class="heroM">
                <div class="heroName">
                  吕布
                  <span class="heroXing">******</span>
                </div>
                <div class="heroInfo">
                  <div>From : ghsfghgssfghfgad1321</div>
                  <div>To : 而苹果苦力怕</div>
                  <div>Date : 2018-11-11</div>
                </div>
              </div>
              <div class="heroR">
                <div class="heroRT">+50</div>
                <div>CAC</div>
              </div>
            </div>
          <div class="hero"></div>
          <div class="hero"></div>
          <div class="hero"></div>
          <div class="hero"></div>
          <div class="hero"></div>
          <div class="hero"></div>
          <div style="height: 17%"></div>
        </div>
      </div>
    </div>
    <com-tab></com-tab>
  </div>
</template>

<script>
  import tab from '@/components/tab'
  export default {
    name: 'mine',
    methods : {
      copy (num) {
        let Url2 = null
        if (num === 1) {
          Url2=document.getElementById("copyT1").innerText;
        } else {
          Url2=document.getElementById("copyT2").innerText;
        }
        let oInput = document.createElement('input');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display='none';
      }
    },
    components: {
      'com-tab': tab
    }
  }
</script>

<style scoped  lang="less">
  .contant{
    height: 100%;
    .indexPic,.tanBg{
      position: absolute;
      width: 100%;
      height: 100%;
      top:0;
    }
    .mine{
      height: 72%;
      background-image: url(/static/imgs/mine/mineTan.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 84%;
      position: absolute;
      margin-left: 8%;
      margin-top: 24%;
      z-index: 9;
      .top{
        width: 60%;
        margin-top: 20%;
        margin-left: 20%;
        .etc{
          width: 40%;
        }
        .topR{
          float: right;
          width: 53.8%;
          height: 18px;
          background-color: #04182a;
          margin-top: 3%;
          border-radius: 20px;
          position: relative;
          line-height: 18px;
          .addPic{
            height: 100%;
            right: 0;
            position: absolute;
            top: 0;
          }
          .topRM{
            width: 80%;
            text-align: center;
            color: white;
          }
        }
      }
      .top1{
        margin-top: 5%;
        .topR1{
          margin-top: 0;
        }
      }
      .copy{
        width: 60%;
        height: 18px;
        background-color: #774a0a;
        margin-left: 20%;
        line-height: 18px;
        overflow: hidden;
        .copyT{
          float: left;
          width: 78%;
          color: white;
          text-align: center;
        }
        .copyB{
          float: right;
          width: 20%;
          background-color: white;
          text-align: center;
          height: 14px;
          font-size: 10px;
          line-height: 14px;
          margin-top: 2px;
          margin-right: 2%;
        }
      }
      .detailed{
        height: 50%;
        background-image: url(/static/imgs/mine/details.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 70%;
        margin-left: 15%;
        margin-top: 7%;
        position: relative;
        .list{
          position: absolute;
          width: 96%;
          left: 2%;
          height: 83%;
          top: 15%;
          border: 1px solid #ebc58e;
          overflow-y: scroll;
          overflow-x: hidden;
          .hero{
            height: 60%;
            width: 200%;
            background-image: url("/static/imgs/hero/listKuang.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: -12%;
            margin-bottom: -26%;
            overflow: hidden;
            margin-left: -50%;
            transform: scale(0.5);
            .heroF{
              float: left;
              height: 76%;
              width: 22.4%;
              background-image: url("/static/imgs/hero/headKuang.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              margin-left: 3%;
              margin-top: 4%;
              img{
                width: 98%;
                height: 96%;
                margin-left: 1%;
                margin-top: 2%;
              }
            }
            .heroM{
              float: left;
              width: 46%;
              font-size: 10px;
              margin-left: 2%;
              .heroName{
                width: 65%;
                height: 1.5rem;
                background-image: url("/static/imgs/hero/txtKuang.png");
                background-size: 100%;
                background-repeat: no-repeat;
                color: #fce619;
                margin-top: 11%;
                padding-left: 2%;
                position: relative;
                .heroXing{
                  font-size: 1.5rem;
                  position: absolute;
                  right: 5%;
                }
              }
              .heroInfo{
                color: white;
                margin-top: 1%;
              }
              .heroInfo>div{
                width: 100%;
                font-size: 1rem;
                margin-left: 2%;
                margin-top: 2%;
                overflow: hidden;
                height: 1.2rem;
                line-height: 1.2rem;
              }
            }
            .heroR{
              float: right;
              width: 19%;
              height: 69%;
              margin-right: 1%;
              margin-top: 5%;
              background-image: url(/static/imgs/mine/record.png);
              background-size: 100% 100%;
              background-repeat: no-repeat;
              color: #d4d55b;
              text-align: center;
              .heroRT{
                margin-top: 30%;
              }
            }
          }
        }
        .list::-webkit-scrollbar{
          width: 12px;
          background-color:#f7eddf;
          border-left: 1px solid #a6937c;
        }
        .list::-webkit-scrollbar-thumb{
          border-radius: 10px;
          /*background-image: url("/static/imgs/mine/scroll.png");*/
          /*background-size: 100%;*/
          /*background-repeat: no-repeat;*/
          background-color: #ffab00;
        }
      }
    }
  }
  @media screen and (min-height: 740px)  and (min-width: 360px){
    #list>div{
      height: 49%;
    }
  }
</style>
